<template>
  <el-tag
    :type="getTagType(severity)"
    :color="getTagColor(severity)"
    :effect="effect"
    :size="size"
    :closable="closable"
    @close="$emit('close')"
  >
    <el-icon v-if="showIcon" class="mr-1">
      <component :is="getSeverityIcon(severity)" />
    </el-icon>
    {{ getSeverityLabel(severity) }}
  </el-tag>
</template>

<script setup lang="ts">
import { 
  Warning, 
  WarnTriangleFilled, 
  InfoFilled, 
  CircleCheck,
  QuestionFilled
} from '@element-plus/icons-vue'
import { DefectSeverity } from '@/types/defect'

interface Props {
  severity: DefectSeverity
  effect?: 'dark' | 'light' | 'plain'
  size?: 'large' | 'default' | 'small'
  closable?: boolean
  showIcon?: boolean
}

withDefaults(defineProps<Props>(), {
  effect: 'light',
  size: 'default',
  closable: false,
  showIcon: true
})

defineEmits<{
  close: []
}>()

// 严重程度标签类型映射
const getTagType = (severity: DefectSeverity) => {
  const typeMap: Record<DefectSeverity, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
    [DefectSeverity.BLOCKER]: 'danger',
    [DefectSeverity.CRITICAL]: 'danger',
    [DefectSeverity.URGENT]: 'danger',
    [DefectSeverity.IMPORTANT]: 'danger',
    [DefectSeverity.MAJOR]: 'warning',
    [DefectSeverity.MINOR]: 'primary',
    [DefectSeverity.TRIVIAL]: 'info'
  }
  return typeMap[severity] || 'info'
}

// 严重程度标签颜色映射
const getTagColor = (severity: DefectSeverity) => {
  const colorMap: Record<DefectSeverity, string> = {
    [DefectSeverity.BLOCKER]: '#e53e3e',
    [DefectSeverity.CRITICAL]: '#f56565',
    [DefectSeverity.URGENT]: '#f56565',
    [DefectSeverity.IMPORTANT]: '#f56565',
    [DefectSeverity.MAJOR]: '#ed8936',
    [DefectSeverity.MINOR]: '#3182ce',
    [DefectSeverity.TRIVIAL]: '#68d391'
  }
  return colorMap[severity] || '#a0aec0'
}

// 严重程度标签文本映射
const getSeverityLabel = (severity: DefectSeverity) => {
  const labelMap: Record<DefectSeverity, string> = {
    [DefectSeverity.BLOCKER]: '阻塞',
    [DefectSeverity.CRITICAL]: '严重',
    [DefectSeverity.URGENT]: '紧急',
    [DefectSeverity.IMPORTANT]: '重要',
    [DefectSeverity.MAJOR]: '主要',
    [DefectSeverity.MINOR]: '次要',
    [DefectSeverity.TRIVIAL]: '轻微'
  }
  return labelMap[severity] || '未知严重程度'
}

// 严重程度图标映射
const getSeverityIcon = (severity: DefectSeverity) => {
  const iconMap: Record<DefectSeverity, any> = {
    [DefectSeverity.BLOCKER]: WarnTriangleFilled,
    [DefectSeverity.CRITICAL]: Warning,
    [DefectSeverity.URGENT]: Warning,
    [DefectSeverity.IMPORTANT]: Warning,
    [DefectSeverity.MAJOR]: InfoFilled,
    [DefectSeverity.MINOR]: CircleCheck,
    [DefectSeverity.TRIVIAL]: QuestionFilled
  }
  return iconMap[severity] || QuestionFilled
}
</script>

<style scoped>
.mr-1 {
  margin-right: 4px;
}
</style>